<template>
  <div class="markdown-editor">
    <div class="editor-toolbar mb-2">
      <div class="flex items-center space-x-2">
        <button
          type="button"
          @click="insertMarkdown('**', '**')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="粗体"
        >
          <strong>B</strong>
        </button>
        <button
          type="button"
          @click="insertMarkdown('*', '*')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="斜体"
        >
          <em>I</em>
        </button>
        <button
          type="button"
          @click="insertMarkdown('`', '`')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="代码"
        >
          <code>&lt;/&gt;</code>
        </button>
        <button
          type="button"
          @click="insertMarkdown('```\n', '\n```')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="代码块"
        >
          <code>```</code>
        </button>
        <button
          type="button"
          @click="insertMarkdown('- ', '')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="列表"
        >
          • 列表
        </button>
        <button
          type="button"
          @click="insertMarkdown('1. ', '')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="有序列表"
        >
          1. 列表
        </button>
        <button
          type="button"
          @click="insertMarkdown('> ', '')"
          class="px-2 py-1 text-sm bg-gray-100 hover:bg-gray-200 rounded transition-colors"
          title="引用"
        >
          > 引用
        </button>
      </div>
    </div>
    
    <textarea
      ref="textareaRef"
      :value="modelValue"
      @input="handleInput"
      :placeholder="placeholder"
      :class="textareaClass"
      class="w-full px-4 py-3 border border-gray-200/50 rounded-xl bg-white/80 backdrop-blur-sm focus:ring-2 focus:ring-blue-500/30 focus:border-blue-500 transition-all duration-200 shadow-sm hover:shadow-md font-mono text-sm resize-vertical"
    ></textarea>
    
    <!-- 预览区域 -->
    <div v-if="showPreview" class="mt-4 p-4 bg-gray-50 rounded-lg border">
      <h4 class="text-sm font-medium text-gray-700 mb-2">预览:</h4>
      <div class="prose prose-sm max-w-none" v-html="renderedMarkdown"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, nextTick } from 'vue'

interface Props {
  modelValue: string
  placeholder?: string
  class?: string
  showPreview?: boolean
}

interface Emits {
  (e: 'update:modelValue', value: string): void
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '请输入内容...',
  showPreview: false
})

const emit = defineEmits<Emits>()

const textareaRef = ref<HTMLTextAreaElement>()

const textareaClass = computed(() => props.class)

// 简单的Markdown渲染函数
const renderedMarkdown = computed(() => {
  if (!props.modelValue) return ''
  
  return props.modelValue
    // 代码块
    .replace(/```([\s\S]*?)```/g, '<pre><code>$1</code></pre>')
    // 行内代码
    .replace(/`([^`]+)`/g, '<code>$1</code>')
    // 粗体
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    // 斜体
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    // 列表
    .replace(/^- (.*$)/gm, '<li>$1</li>')
    .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
    // 有序列表
    .replace(/^\d+\. (.*$)/gm, '<li>$1</li>')
    // 引用
    .replace(/^> (.*$)/gm, '<blockquote>$1</blockquote>')
    // 换行
    .replace(/\n/g, '<br>')
})

const handleInput = (event: Event) => {
  const target = event.target as HTMLTextAreaElement
  emit('update:modelValue', target.value)
}

const insertMarkdown = (before: string, after: string) => {
  if (!textareaRef.value) return
  
  const textarea = textareaRef.value
  const start = textarea.selectionStart
  const end = textarea.selectionEnd
  const selectedText = props.modelValue.substring(start, end)
  
  const newText = props.modelValue.substring(0, start) + 
                  before + selectedText + after + 
                  props.modelValue.substring(end)
  
  emit('update:modelValue', newText)
  
  // 设置光标位置
  nextTick(() => {
    const newCursorPos = start + before.length + selectedText.length
    textarea.setSelectionRange(newCursorPos, newCursorPos)
    textarea.focus()
  })
}

// 暴露方法给父组件
defineExpose({
  focus: () => textareaRef.value?.focus(),
  blur: () => textareaRef.value?.blur()
})
</script>

<style scoped>
.markdown-editor {
  @apply w-full;
}

.editor-toolbar {
  @apply flex items-center justify-between;
}

.prose {
  @apply text-gray-800;
}

.prose pre {
  @apply bg-gray-100 p-2 rounded;
}

.prose code {
  @apply bg-gray-100 px-1 py-0.5 rounded text-sm;
}

.prose strong {
  @apply font-semibold;
}

.prose em {
  @apply italic;
}

.prose ul {
  @apply list-disc list-inside;
}

.prose ol {
  @apply list-decimal list-inside;
}

.prose blockquote {
  @apply border-l-4 border-gray-300 pl-4 italic;
}
</style>
